<template>
  <el-row>
    <div class="section-input">
      <el-checkbox-group v-model="sels">
        <div :class="question.style==='v'?'':'box'">
          <section v-for="option in question.options" :key="option.key" >
            <el-checkbox :label="option.text" :checked="option.checked" class="check-box">
              <view-options :option="option" ></view-options>
            </el-checkbox>
          </section>
        </div>
      </el-checkbox-group>
      <!--<el-checkbox-group v-model="sels">-->
        <!--<div v-if="question.style==='v'">-->
          <!--<section v-for="option in question.options" :key="option.key">-->
            <!--<el-checkbox :label="option.text" :checked="option.checked">-->
              <!--<view-options :option="option"></view-options>-->
            <!--</el-checkbox>-->
          <!--</section>-->
        <!--</div>-->
        <!--<div v-else>-->
          <!--<section v-for="option in question.options" :key="option.key" style="float:left">-->
            <!--<el-checkbox :label="option.text" :checked="option.checked">-->
              <!--<view-options :option="option"></view-options>-->
            <!--</el-checkbox>-->
          <!--</section>-->
        <!--</div>-->
      <!--</el-checkbox-group>-->
    </div>
  </el-row>
</template>

<script>
  import viewOptions from './viewOptions'
    export default {
      name: "view-i-checkbox",
      props:['question'],
      components:{viewOptions},
      data(){
        return {
          sels:[]
        }
      },
      methods:{
      }
    }
</script>

<style lang="scss">
  .box{
    border: 0px solid blue;
    display: flex;
    flex-direction: row;
  }
  .check-box{
    border: 0px solid orangered;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 15px;
  }
</style>
